<template>
  <div class="tripartite-login" v-if="!$util.isEmpty(getGlobThirdLoginConfig)">
    <el-divider>第三方登录</el-divider>
    <el-row type="flex" justify="space-around" v-if="!$util.isEmpty(getGlobThirdLoginConfig)">
      <el-link
        type="primary"
        :underline="false"
        :href="getGlobThirdLoginConfig.weixin"
        v-if="$util.isDef(getGlobThirdLoginConfig.weixin)"
      >
        <img src="@/assets/images/public/wechat.png" alt />
      </el-link>
      <el-link
        type="primary"
        :underline="false"
        :href="getGlobThirdLoginConfig.qq"
        v-if="$util.isDef(getGlobThirdLoginConfig.qq)"
      >
        <img src="@/assets/images/public/qq.png" alt />
      </el-link>
      <el-link
        type="primary"
        :underline="false"
        :href="getGlobThirdLoginConfig.weibo"
        v-if="$util.isDef(getGlobThirdLoginConfig.weibo)"
      >
        <img src="@/assets/images/public/weibo.png" alt />
      </el-link>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      getGlobThirdLoginConfig: state => state.projectSetting.globThirdLoginConfig
    })
  }
}
</script>
<style lang="scss" scoped>
.tripartite-login {
  margin-top: 45px;
  ::v-deep .el-divider--horizontal {
    width: 220px;
    margin-left: auto;
    margin-right: auto;
  }
  .el-divider {
    background-color: $border-color-divider;
    .el-divider__text {
      font-size: 12px;
      color: $text-color-auxiliary;
    }
  }
}
</style>
